<template>
  <div class="listContainer" :style="{ height: lines*35+ 'px' }">
    <div class="listItem" v-for="item in list" :key="item.name+item.time">
      <div class="imgWrap">
        <el-image :src="item.icon">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
      </div>
      <div class="nameWrap">{{ item.name }}</div>
      <div class="moneyWrap">
        <span>交易金额：</span>
        <span class="num">{{ item.money }}</span>
      </div>
      <div class="timeWrap">{{ item.time }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TradeDetail",
  props: {
    // 显示几行
    lines: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      timer: null,
      list: [
        { icon: require("@/assets/images/licang/shang/1.png"), name: '大博韩国料理(金水路店)', money: '￥ 311.00', time: this.$moment().format('HH:mm:ss') },
        { icon: require("@/assets/images/licang/shang/2.png"), name: '大田牛尾汤(青岛李沧店)', money: '￥ 167.00', time: this.$moment().format('HH:mm:ss') },
        { icon: require("@/assets/images/licang/shang/3.png"), name: '安東찜닭·新韩国料理(乐客城店)', money: '￥ 198.00', time: this.$moment().format('HH:mm:ss') },
        { icon: require("@/assets/images/licang/shang/4.png"), name: '松崎咖啡下午茶(李沧信联天地店)', money: '￥ 29.80', time: this.$moment().format('HH:mm:ss') },
        { icon:require("@/assets/images/licang/shang/5.png"), name: '不过拾咖啡', money: '￥ 32.00', time: this.$moment().format('HH:mm:ss') },
        { icon: require("@/assets/images/licang/shang/6.png"), name: '瑞幸咖啡(青岛李沧店)', money: '￥ 35.00', time: this.$moment().format('HH:mm:ss') }
      ],
      source: [
        { icon: require("@/assets/images/licang/shang/1.png"), name: '大博韩国料理(金水路店)', money: '￥ 311.00', time: this.$moment().format('HH:mm:ss') },
        { icon:require("@/assets/images/licang/shang/2.png"), name: '大田牛尾汤(青岛李沧店)', money: '￥ 167.00', time: this.$moment().format('HH:mm:ss') },
        { icon:require("@/assets/images/licang/shang/3.png"), name: '安東찜닭·新韩国料理(乐客城店)', money: '￥ 198.00', time: this.$moment().format('HH:mm:ss') },
        { icon: require("@/assets/images/licang/shang/4.png"), name: '松崎咖啡下午茶(李沧信联天地店)', money: '￥ 29.80', time: this.$moment().format('HH:mm:ss') },
        { icon: require("@/assets/images/licang/shang/5.png"), name: '不过拾咖啡', money: '￥ 32.00', time: this.$moment().format('HH:mm:ss') },
        { icon: require("@/assets/images/licang/shang/6.png"), name: '瑞幸咖啡(青岛李沧店)', money: '￥ 35.00', time: this.$moment().format('HH:mm:ss') }
      ]
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      this.genData()
    }, 2000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    genData() {
      const randomIndex = parseInt(Math.floor(Math.random() * this.list.length))
      const name = this.source[randomIndex].name
      const randomMoney = parseFloat(Math.random()*100).toFixed(2)
      this.list.unshift({ icon: this.source[randomIndex].icon, name, money: `￥ ${randomMoney}`, time: this.$moment().format('HH:mm:ss') })
      if (this.list.length > 6) {
        this.list = this.list.splice(0,6)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.listContainer {
  width: 100%;
  height: 190px;
  overflow: hidden;
  padding: 10px;
}
.listItem {
  display: flex;
  justify-content: space-between;
  line-height: 28px;
  color: #fff;
  margin-bottom: 10px;
  .imgWrap {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
  }
  .nameWrap {
    width: 50%;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
  }
  .moneyWrap {
    width: 35%;
    font-weight: bold;
    .num {
      color: #FFC344;
    }
  }
  .timeWrap {
    // width: 20%;
  }
}

</style>